<%--
  Created by IntelliJ IDEA.
  User: Superior
  Date: 2019/8/5
  Time: 11:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.scau.ums.util.tools.IpAddress" %>
<html class="no-js" lang="en">
<script src="js/jquery-3.2.1min.js"></script>
<script src="js/tanchuang.js"></script>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>管理员主界面</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,700,800,900%7CPoppins:300,400,500,600,700,800,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrapmin.css">
    <!-- Font-awesome CSS -->
    <link rel="stylesheet" href="/css/font-awesomemin.css">
    <!-- Slick slider css -->
    <link rel="stylesheet" href="/css/slickmin.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- Nice Select css -->
    <link rel="stylesheet" href="/css/nice-select.css">
    <!-- jquery UI css -->
    <link rel="stylesheet" href="/css/jqueryuimin.css">
    <!-- main style css -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- webSocket settings -->
    <script src="/js/sockjs.min.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript">
            // var websocket;
            // if('WebSocket' in window) {
            //     console.log("此浏览器支持websocket");
            //     websocket = new WebSocket("ws://localhost:8080/websocket");
            // } else if('MozWebSocket' in window) {
            //     alert("此浏览器只支持MozWebSocket");
            // } else {
            //     alert("此浏览器只支持SockJS");
            // }
            // websocket.onopen = function(evnt) {
            //     console.log(evnt);
            //     $("#tou").html("链接服务器成功!")
            // };
            // websocket.onmessage = function(evnt) {
            //
            // };
            // websocket.onerror = function(evnt) {};
            // websocket.onclose = function(evnt) {
            //     console.log("与服务器断开了链接!");
            //     $("#tou").html("与服务器断开了链接!")
            // }
            //
            // $('#close').bind('click', function() {
            //     websocket.close();
            // });
            //
            //
            //
            // function send() {
            //     if (websocket != null) {
            //         var message = "管理员发送了一条消息给你";
            //         websocket.send(message);
            //     } else {
            //         alert('未与服务器链接.');
            //     }
            // }

            var userno = "<%=request.getSession().getAttribute("USER_ID")%>";
            var websocket = null;
            //判断当前浏览器是否支持WebSocket
            if ('WebSocket' in window) {
                websocket = new WebSocket("ws://<%=IpAddress.ipAddress%>:8080/websocket/<%=request.getSession().getAttribute("USER_ID")%>");
            }
            else {
                alert('当前浏览器 Not support websocket')
            }



            //连接发生错误的回调方法
            websocket.onerror = function () {
                console.log("WebSocket连接发生错误");
            };


            //连接成功建立的回调方法
            websocket.onopen = function () {
                console.log("WebSocket连接成功");
            }


            //接收到消息的回调方法
            websocket.onmessage = function (event) {
                console.log(event.data);
            }


            //连接关闭的回调方法
            websocket.onclose = function () {
                console.log("WebSocket连接关闭");
            }


            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = function () {
                closeWebSocket();
            }


            //将消息显示在网页上
            function setMessageInnerHTML(sendMessage) {
                document.getElementById('message').innerHTML += sendMessage + '=>';
            }


            //关闭WebSocket连接
            function closeWebSocket() {
                websocket.close();
            }


            //发送消息给单个用户
            function sendToUser() {
                var message = document.getElementById('noticeContent').value;//要发送的消息内容
                // var now=getNowFormatDate();//获取当前时间
                // document.getElementById('message').innerHTML += (now+"发送人："+userno+'=>'+"---"+message) + '=>';
                // document.getElementById('message').style.color="red";
                var ToSendUserno=document.getElementById('receiverId').value; //接收人编号
                message=message+"|"+ToSendUserno;//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
                websocket.send(message);
            }

            //发送消息给多个用户
            function sendToALL() {
                var message = document.getElementById('noticeContent').value;//要发送的消息内容
                var ToAllUser="ALL";
                message=message+"|"+ToAllUser;//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
                websocket.send(message);
            }
            //获取当前时间
            function getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + date.getHours() + seperator2 + date.getMinutes()
                    + seperator2 + date.getSeconds();
                return currentdate;
            }

            // 点击发送按钮，执行sendToUser函数，发送给单个用户
            function uu() {
                var receiverId = $("[name='receiverId']").val(); // 注意，jquery筛选一定加引号，否则报错uncaught
                var receiverType = $("[name='receiverType']").val();
                var noticeTitle = $("[name='noticeTitle']").val();
                var noticeContent = $("[name='noticeContent']").val();
                $.ajax({
                    url: "/sendInfoToOneUser",
                    type: "POST",
                    data: {
                        "receiverId": receiverId,
                        "receiverType": receiverType,
                        "noticeTitle": noticeTitle,
                        "noticeContent": noticeContent
                    },
                    dataType: "json",
                    success: function (data) {
                        sendToUser();
                        $("#flipInX").click();

                    },
                    error: function () {
                        alert("ajax发送消息给用户失败");
                    }
                })
            }


            // 点击发送按钮，执行sendToALL函数，发送给学生/老师/维修员用户
            function uu2() {
                var toAllInfoTitle = $("[name='toAllInfoTitle']").val();
                var toAllInfoContent = $("[name='toAllInfoContent']").val();
                $.ajax({
                    url: "/sendInfoToAll",
                    type: "POST",
                    data: {
                        "toAllInfoTitle": toAllInfoTitle,
                        "toAllInfoContent": toAllInfoContent
                    },
                    success: function (data) {
                        if(data=="true"){

                            sendToALL();
                            $("#flipInX").click();
                        }

                    },
                    error: function () {
                        alert("ajax发送消息给所有用户失败");
                    }
                })
            }


    </script>

    <!--notification样式-->
    <style type="text/css">
        .notification {
            /*width: 360px;*/
            /*height: 110px;*/
            /*z-index: 9000;*/
            /*position: fixed;*/
            /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);*/
            /*padding: 20px;*/
            /*margin: 0.5rem 0 1rem 0;*/
            /*border-radius: 2px;*/
            /*background-color: #fff;*/
        }

        .notification .dismiss {
            top: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            overflow: hidden;
            position: absolute;
            background-color: #B8B8B8;
            border-radius: 50%;
        }

        .notification .illustration {
            margin-right: 20px;
            float: left;
        }

        .notification .illustration img {
            border-radius: 50%;
        }

        .notification .text .title {
            font-size: 18px;
            font-weight: bold;
        }

    </style>

    <!--notification.js样式-->
    <script>

        Notification = window.Notification || {};

        Notification = function () {

            'use strict';

            var number = 0;
            var incPosition = 0;

            var template = function (title, text, image, position) {
                incPosition = number * 120;
                number = number + 1;
                var textHtml = '<div class="text">' + text + '</div>';
                var titleHtml = (!title ? '' : '<div class="title">' + title + '</div>');
                var imageHtml = (!image ? '' : '<div class="illustration"><img src="' + image + '" width="70" height="70" /></div>');
                var style;
                switch (parseInt(position, 10)) {
                    case 1:
                        style = "top:" + incPosition + "px; left:20px;";
                        break;
                    case 2:
                        style = "top:" + incPosition + "px; right:20px;";
                        break;
                    case 3:
                        style = "bottom:" + incPosition + "px; right:20px;";
                        break;
                    case 4:
                        style = "bottom:" + incPosition + "px; left:20px;";
                        break;
                    default:
                        ;
                }
                return {
                    id: number,
                    content: '<div style="undefinedposition: ;position: fixed;top: 15px;z-index: 33;width: 360px;height: 85px;background: wheat;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)" class="notification notification-' + number + ' " style="' + style + '">' +
                        '<div class="dismiss">&#10006;</div>' +
                        imageHtml +
                        '<div class="text">' + titleHtml + textHtml + '</div>' +
                        '</div>'
                };
            };

            var hide = function (id) {
                $(document).find('.notification-' + id).remove();
                number = number - 1;
            };

            var create = function (title, text, image, animation, position, delay) {
                var notification = template(title, text, image, position);
                $(notification.content).addClass('animated ' + animation).appendTo('body');
                if (!delay) {
                    delay = 2;
                }
                setTimeout(function () {
                    hide(notification.id);
                }, 1000 * delay);
            };

            return {
                create: create
            };

        }();

    </script>
</head>

<body>

<header class="header-area">

    <div class="main-header d-none d-lg-block">
        <!--顶部left开始-->
        <div class="header-top black-bg">
            <div class="container">
                <!--顶部选择-->
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="top-left-navigation">
                            <ul class="nav align-items-center">
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex justify-content-end">
                        <div class="header-social-link">
                        </div>
                        <ul class="user-info-block">
                            <!--登录开始-->
                            <%if (request.getSession().getAttribute("USER_NAME")==null){%>
                            <li><a href="/login"><i class="fa fa-sign-in"></i> 登录</a></li>
                            <%}else{%>
                            <ul class="nav">
                                <!--登录开始-->
                                <li class="mini-cart-wrap">
                                    <a href="#" class="minicart-btn">
                                        <span class="fa fa-user-circle-o"></span>
                                        <% String username=(String)request.getSession().getAttribute("USER_NAME");out.print(username);%>
                                    </a>

                                    <!--两个按钮开始-->
                                    <div class="cart-list-wrapper">
                                        <div class="minicart-button">
                                            <a href="/adminEntrance"><i class="fa fa-user-plus"></i> 我的</a>
                                            <a href="/logout"><i class="fa fa-user-times"></i> 注销</a>
                                            <!--当管理员发消息时，会自动触发此按钮，相应的，会触发对应绑定的click事件，此按钮默认隐藏-->
                                            <button id="flipInX" class="notify btn" value="flipInX" style="display:none">flipInX</button>
                                            <script>
                                                var position=100;
                                                $("#flipInX").click(function (event) {
                                                    Notification.create(
                                                        // Title
                                                        "提示",
                                                        // Text
                                                        "发送消息成功",
                                                        // Illustration
                                                        "img/user.jpg",
                                                        // Effect
                                                        $(event.target).text(),
                                                        // Position
                                                        position
                                                    );
                                                });
                                            </script>
                                        </div>
                                    </div>
                                    <!--两个按钮结束-->
                                </li>
                                <!--登录结束-->
                            </ul>
                            <%}%>
                            <!--登录结束-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--顶部left结束-->

        <div class="header-main-area black-soft sticky">
            <div class="container">
                <div class="row align-items-center position-relative">
                    <!-- logo展示开始 -->
                    <div class="col-auto">
                        <div class="logo">
                            <a href="/">
                                <img src="/img/2.jpg" style="margin-bottom:58px" alt="Brand Logo">
                            </a>
                        </div>
                    </div>
                    <!-- logo展示结束 -->
                    <div class="col-auto position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- 标签栏开始 -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li class="active"><a href="/adminEntrance">主页 <i class="fa fa-angle-left"></i></a>
                                        </li>
                                        <li><a href="#">管理模块 <i class="fa fa-angle-down"></i></a>
                                            <ul class="dropdown">
                                                <li><a href="/publishNews">发表新闻 <i class="fa fa-plus"></i></a>
                                                </li>
                                                <li><a href="GetverifySuggestions">言论管理 <i class="fa fa-twitch"></i></a>
                                                </li>
                                                <li><a href="#">失物招领审核 <i class="fa fa-gratipay"></i></a>
                                                </li>
                                                <li><a href="#">添加用户 <i class="fa fa-user-plus"></i></a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="/sendInfo">发送通知 <i class="fa fa-angle-left"></i></a></li>
                                    </ul>
                                </nav>
                                <!-- 标签栏结束 -->
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>


    </div>


</header>

<main>

    <!-- 导航图片开始 -->
    <div class="breadcrumb-area breadcrumb-img bg-img" data-bg="img/6.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-wrap">
                        <nav aria-label="breadcrumb">
                            <h3 class="breadcrumb-title">高校后勤综合信息管理平台管理员模块</h3>
                            <ul class="breadcrumb justify-content-center">
                                <li class="breadcrumb-item"><a href="/adminEntrance"><i class="fa fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/sendInfo">发送通知</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航图片结束 -->


    <!-- 发送消息style开始 -->
    <div class="my-account-wrapper section-padding">
        <div class="container">
            <div class="section-bg-color">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="myaccount-page-wrapper">
                            <div class="row">
                                <!--两个侧栏标签页开始-->
                                <div class="col-lg-3 col-md-4">
                                    <div class="myaccount-tab-menu nav" role="tablist">
                                        <a id="btn3" href="#userInfo" class="active" data-toggle="tab"><i class="fa fa-info "></i>
                                            发送通知</a>
                                        <a id="btn4" href="#allUserInfo" data-toggle="tab"><i class="fa fa-info-circle"></i>
                                            群发通知</a>
                                        </div>
                                </div>
                                <!--两个侧栏标签页结束-->


                                <div class="col-lg-9 col-md-8">
                                    <div class="tab-content" id="myaccountContent">
                                        <!-- 发送通知开始 -->
                                        <div class="tab-pane fade show active" id="userInfo" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>发送通知给单个用户<span style="float: right;margin-right:232px">你的id为<p id="ownId" style="float: right"><%=request.getSession().getAttribute("USER_ID")%></p></span></h5>

                                                <div class="myaccount-table table-responsive text-center">
                                                    <div class="blog-main-wrapper section-padding" style="padding: 0;">
                                                        <div class="container">
                                                            <div class="row">

                                                                <div class="col-lg-9 order-1">
                                                                    <div class="blog-item-wrapper">

                                                                        <!-- 发送通知开始 -->
                                                                        <div class="blog-comment-wrapper">
                                                                            <form action="/sendInfoToOneUser" method="post">
                                                                                <div class="comment-post-box">
                                                                                    <div class="row">

                                                                                        <div class="col-lg-4 col-md-4">
                                                                                            <label>接收人学号/工号</label>
                                                                                            <input type="text" class="coment-field" name="receiverId" id="receiverId" placeholder="接收人学号/工号" required>
                                                                                        </div>

                                                                                        <div class="col-lg-4 col-md-4" style="margin-right: 10px">
                                                                                            <label>身份</label>
                                                                                            <select id="receiverType" name="receiverType">
                                                                                                <option value="老师">老师</option>
                                                                                                <option value="学生">学生</option>
                                                                                            </select>
                                                                                        </div>

                                                                                        <div class="col-lg-4 col-md-4">
                                                                                            <label>通知标题</label>
                                                                                            <input type="text" class="coment-field" name="noticeTitle" id="noticeTitle" placeholder="通知标题" autocomplete="off" required>
                                                                                        </div>

                                                                                        <div class="col-lg-4 col-md-4">
                                                                                            <label>通知内容</label>
                                                                                            <input type="text" name="noticeContent" id="noticeContent" class="coment-field" placeholder="通知内容" autocomplete="off" required>
                                                                                        </div>

                                                                                        <div class="col-12">
                                                                                            <div class="coment-btn">
                                                                                                <button id="sendInfoInput" class="btn btn-sqr" type="button" name="submit" onclick="uu()">发送</button>
                                                                                            </div>
                                                                                        </div>


                                                                                    </div>
                                                                                </div>
                                                                            </form>
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <!-- 发送通知结束 -->

                                        <!-- 群发通知开始 -->
                                        <div class="tab-pane fade show" id="allUserInfo" role="tabpanel">
                                            <div class="myaccount-content">
                                                <h5>发送通知给多个用户</h5>

                                                <div class="myaccount-table table-responsive text-center">
                                                    <div class="blog-main-wrapper section-padding" style="padding: 0;">
                                                        <div class="container">
                                                            <div class="row">

                                                                <div class="col-lg-9 order-1">
                                                                    <div class="blog-item-wrapper">

                                                                        <!-- 发送通知开始 -->
                                                                        <div class="blog-comment-wrapper">
                                                                            <form action="/sendInfoToAll" method="post">
                                                                                <div class="comment-post-box">
                                                                                    <div class="row">

                                                                                        <div class="col-lg-4 col-md-4">
                                                                                            <label>通知标题</label>
                                                                                            <input type="text" class="coment-field" name="toAllInfoTitle" id="toAllInfoTitle" placeholder="通知标题" autocomplete="off" required>
                                                                                        </div>

                                                                                        <div class="col-lg-4 col-md-4">
                                                                                            <label>通知内容</label>
                                                                                            <input type="text" name="toAllInfoContent" id="toAllInfoContent" class="coment-field" placeholder="通知内容" autocomplete="off" required>
                                                                                        </div>

                                                                                        <div class="col-12">
                                                                                            <div class="coment-btn">
                                                                                                <button id="sendAllUserInfoInput" class="btn btn-sqr" type="button" name="submit" onclick="uu2()">发送</button>
                                                                                            </div>
                                                                                        </div>


                                                                                    </div>
                                                                                </div>
                                                                            </form>
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <!-- 群发通知结束 -->

                                    </div>
                                </div>


                                <script>
                                    function my(id){
                                        return document.getElementById(id);
                                    }
                                    my("btn3").onclick=function(){

                                    }
                                    my("btn4").onclick=function(){

                                    }

                                </script>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 发送消息style结束 -->


</main>


<!-- 底部style开始 -->
<footer class="black-bg">
    <div class="footer-middle-area">
        <div class="container">
            <div class="row mtn-30">
                <div class="col-lg-6 col-sm-12">
                    <div class="address-block mt-30">
                        <div class="footer-logo">
                            <a href="#">
                                <img src="/img/2.jpg" alt="Brand Logo">
                            </a>
                        </div>
                        <address class="address-info d-flex align-items-center">
                            <i class="fa fa-map-marker"></i>
                            <p><span>ADDRESS : </span> 梦翔大厦</p>
                        </address>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-envelope"></i>
                        <p><span>EMAIL : </span><a href="#">xxxx@qq.com</a></p>
                    </address>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <address class="address-info email mt-30">
                        <i class="fa fa-phone"></i>
                        <p><span>PHONE : </span><a href="#">158xxxxx9442</a></p>
                    </address>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom-area text-center">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="payment-method-list">

                    </div>

                    <p class="copyright">
                        Copyright © www.xxx.com
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- 底部style结束 -->



<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="/js/modernizr-3.6.0min.js"></script>
<!-- jQuery JS -->
<script src="/js/jquery-3.3.1min.js"></script>
<!-- Tanchuang JS -->
<script src="/js/tanchuang.js"></script>
<!-- Popper JS -->
<script src="/js/poppermin.js"></script>
<!-- Bootstrap JS -->
<script src="/js/bootstrapmin.js"></script>
<!-- slick Slider JS -->
<script src="/js/slickmin.js"></script>
<!-- Countdown JS -->
<script src="/js/countdownmin.js"></script>
<!-- Nice Select JS -->
<script src="/js/nice-selectmin.js"></script>
<!-- jquery UI JS -->
<script src="/js/jqueryuimin.js"></script>
<!-- Image zoom JS -->
<script src="/js/image-zoommin.js"></script>
<!-- image loaded js -->
<script src="/js/imagesloadedpkgdmin.js"></script>
<!-- masonry  -->
<script src="/js/masonrypkgdmin.js"></script>
<!-- mailchimp active js -->
<script src="/js/ajaxchimp.js"></script>
<!-- contact form dynamic js -->
<script src="/js/ajax-mail.js"></script>
<!-- google map api -->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCfmCVTjRI007pC1Yk2o2d_EhgkjTsFVN8"></script>
<!-- google map active js -->
<script src="/js/google-map.js"></script>
<!-- Main JS -->
<script src="/js/main.js"></script>
</body>

</html>
